<template>
  <div>
  <serch-bar></serch-bar>
    <!-- 轮播图 -->
    <swiper indicator-dots circular>
      <swiper-item v-for='(item,index) in swiperData' :key="index">
        <image :src="item.image_src"></image>
      </swiper-item>
    </swiper>
    <!-- 菜单 -->
    <div class="menu" v-for='(item,index) in menuData' :key="index">
      <image :src="item.image_src"></image>
    </div>
    <!-- 列表 -->
    <div class="list" v-for="(item,index) in listData1" :key="index">
      <div class="list_title">
        <img class="img" :src="item.floor_title.image_src" >
      </div>
      <div class="list_content">
        <div class="content_left">
          <img :src="item.imageSrcPath">
        </div>
        <div class="content_right">
          <img v-for="(item,i) in item.listImg" :key="i" :src="item.image_src">
        </div>
      </div>
    </div>
    <!-- top图标 -->
    <div class="top" @click="toTop()" v-show="flag">
      <span>︿</span>
      <p>顶部</p>
    </div>
  </div>
</template>
<script>
import request from "../../utils/request.js";
import SearchBar from "../../components/SearchBar";
export default {
  data () {
    return {
      // 定义轮播图数据
      swiperData:[],
      menuData:[],
      listData:[],
      // 这里定义一个标志位
      flag:false
    }
  },
  components:{
    'serch-bar':SearchBar
  },
  created(){
    // 调用初始化数据函数
    this.initData();
    // 调用后台轮播图接口数据
  // wx.request({
  //   url:'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata',
  //   method:"GET",
  //   success:(res)=>{
  //     this.swiperData= res.data.message;
  //   }
  // }),
  // // 调用后台轮播图接口数据
  // wx.request({
  //   url:'https://www.zhengzhicheng.cn/api/public/v1/home/catitems',
  //   method:"GET",
  //   success:(res)=>{
  //     this.menuData= res.data.message;
  //     console.log(this.menuData)
  //   }
  // })
  },
  computed:{
    listData1 () {
      // 循环listData
      return this.listData.map(item=>{
        // 得到数组中的第一个数
        item.imageSrcPath = item.product_list[0].image_src;
        // 得到后4个数,使用过滤器
        item.listImg = item.product_list.filter(function (item,i){
          return i>0;
        })
        return item;
      })
    }
  },
  methods:{
    // top操作
    toTop () {
      wx.pageScrollTo({
         scrollTop: 0
   })
    },
    // 初始化数据
   async initData(){
    //  轮播图
     let swiperRes = await request('home/swiperdata');
     this.swiperData = swiperRes.data.message;
    //  菜单
     let menuRes = await request('home/catitems');
     this.menuData = menuRes.data.message;
    //  列表
    let listRes = await request('home/floordata');
    this.listData = listRes.data.message;
    console.log(this.listData)
    }
  },

  onPageScroll(top){
   return this.flag = top.scrollTop > 150
  },
  // 下拉刷新
  onPullDownRefresh(){
    this.initData()
  }
}
</script>
<style scoped lang="less">
 @import './main.less';
</style>

